<template>
  <div class="role-manager" style="display: flex; gap: 32px;">
    <div class="role-list" style="width: 220px;">
      <a-list :dataSource="roleList" bordered>
        <template #renderItem="{ item }">
          <a-list-item @click="selectRole(item)" :class="{active: item.id === selectedRoleId}">
            {{ item.roleName }}
            <a-button type="link" @click.stop="editRole(item)">编辑</a-button>
            <a-popconfirm title="确定删除？" @confirm="deleteRole(item.id)">
              <a-button type="link" danger>删除</a-button>
            </a-popconfirm>
          </a-list-item>
        </template>
      </a-list>
      <a-button type="primary" block @click="openAddRole">新增角色</a-button>
    </div>
    <div class="prompt-list" style="flex:1;" v-if="selectedRoleId">
      <a-list :dataSource="promptList" bordered>
        <template #renderItem="{ item }">
          <a-list-item>
            <span style="color:#888;">[{{ item.alias }}]</span> {{ item.prompt }}
            <a-button type="link" @click.stop="editPrompt(item)">编辑</a-button>
            <a-popconfirm title="确定删除？" @confirm="deletePrompt(item.id)">
              <a-button type="link" danger>删除</a-button>
            </a-popconfirm>
          </a-list-item>
        </template>
      </a-list>
      <a-button type="primary" block @click="openAddPrompt">新增提示词</a-button>
    </div>
    <a-modal v-model:visible="roleModalVisible" :title="roleModalTitle" @ok="handleRoleOk">
      <a-form :model="roleForm">
        <a-form-item label="角色名" name="roleName" required>
          <a-input v-model:value="roleForm.roleName" />
        </a-form-item>
        <a-form-item label="描述" name="description">
          <a-input v-model:value="roleForm.description" />
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal v-model:visible="promptModalVisible" :title="promptModalTitle" @ok="handlePromptOk">
      <a-form :model="promptForm">
        <a-form-item label="提示词别名" name="alias" required>
          <a-input v-model:value="promptForm.alias" placeholder="唯一英文/拼音/短语" />
        </a-form-item>
        <a-form-item label="提示词" name="prompt" required>
          <a-textarea v-model:value="promptForm.prompt" rows="3" />
        </a-form-item>
        <a-form-item label="排序" name="sort">
          <a-input-number v-model:value="promptForm.sort" :min="0" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { aiRoleApi } from '/@/api/business/ai/ai-role-api';
import { message } from 'ant-design-vue';

const roleList = ref([]);
const promptList = ref([]);
const selectedRoleId = ref();

const roleModalVisible = ref(false);
const roleModalTitle = ref('');
const roleForm = ref({});
let editRoleId = null;

const promptModalVisible = ref(false);
const promptModalTitle = ref('');
const promptForm = ref({});
let editPromptId = null;

function loadRoleList() {
  aiRoleApi.getRoleList().then(res => { roleList.value = res.data || []; });
}
function selectRole(item) {
  selectedRoleId.value = item.id;
  loadPromptList();
}
function loadPromptList() {
  if (!selectedRoleId.value) return;
  aiRoleApi.getPromptList(selectedRoleId.value).then(res => { promptList.value = res.data || []; });
}
function openAddRole() {
  roleModalTitle.value = '新增角色';
  roleForm.value = {};
  editRoleId = null;
  roleModalVisible.value = true;
}
function editRole(item) {
  roleModalTitle.value = '编辑角色';
  roleForm.value = { ...item };
  editRoleId = item.id;
  roleModalVisible.value = true;
}
function handleRoleOk() {
  if (!roleForm.value.roleName) { message.error('请填写角色名'); return; }
  const api = editRoleId ? aiRoleApi.updateRole : aiRoleApi.addRole;
  api({ ...roleForm.value, id: editRoleId }).then(() => {
    message.success('操作成功');
    roleModalVisible.value = false;
    loadRoleList();
  });
}
function deleteRole(id) {
  aiRoleApi.deleteRole(id).then(() => { message.success('删除成功'); loadRoleList(); });
}
function openAddPrompt() {
  promptModalTitle.value = '新增提示词';
  promptForm.value = { sort: 0 };
  editPromptId = null;
  promptModalVisible.value = true;
}
function editPrompt(item) {
  promptModalTitle.value = '编辑提示词';
  promptForm.value = { ...item };
  editPromptId = item.id;
  promptModalVisible.value = true;
}
function handlePromptOk() {
  if (!promptForm.value.prompt) { message.error('请填写提示词'); return; }
  const api = editPromptId ? aiRoleApi.updatePrompt : aiRoleApi.addPrompt;
  api({ ...promptForm.value, id: editPromptId, roleId: selectedRoleId.value }).then(() => {
    message.success('操作成功');
    promptModalVisible.value = false;
    loadPromptList();
  });
}
function deletePrompt(id) {
  aiRoleApi.deletePrompt(id).then(() => { message.success('删除成功'); loadPromptList(); });
}
loadRoleList();
</script>
<style scoped>
.role-manager .active { background: #e6f7ff; }
</style> 